import Vue from 'vue'
import Vuex from 'vuex'
import showModal from './showModal'
import loginStatus from './loginStatus'
import showToast from './showToast'
import userInfo from './userInfo'
import home from './home'
Vue.use(Vuex)

// 引入持久化插件
import createPersistedState from 'vuex-persistedstate'
export default new Vuex.Store({
  state: {

  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    showModal,
    loginStatus,
    showToast,
    userInfo,
    home
  },
  // 使用持久化插件
  plugins: [createPersistedState({
    // storage: window.sessionStorage,
    // reducer: state => ({
      // 存储方式：localStorage、sessionStorage、cookies  默认: localStorage
      // storage: window.sessionStorage,
      // 存储的 key 的key值
      // key: "store",
      // render(state) {
      // 要存储的数据：本项目采用es6扩展运算符的方式存储了state中所有的数据
        // return { ...state };
      // }
      // 这里我们的项目采用的是分模块存储的数据，所以需要修改成下面这种方式
      key: 'mutilpleModuleData',
      // 将想要缓存的模块名称添加到 paths 中
      paths: ['showModal', 'loginStatus', 'showToast', 'userInfo', 'home']  // 存储的模块
    // })
  })]

})
/*
  在其他组件中调用
import { mapState, mapMutations, mapActions } from "vuex";

如果是要引入state中的属性，则需要在computed中引入

computed: {
  ...mapState({
    属性名称 : state => state.文件夹名称.属性名称
  })

  上面这种方法在看起来不美观，推荐下面这种
  ...mapState("文件夹名称",["属性名称" , "属性名称"])
}


如果是要引入mutations中的方法，则需要在methods中引入
methods: {
  ...mapMutations("文件夹名称",["方法名称" , "方法名称"])
  ...mapMutations("其他文件夹名称",["方法名称" , "方法名称")
  上面这种方法只能引入一个文件夹里的方法，如果需要引入多个文件夹的方法，则需要使用多个...mutations

  还有另一种写法
  ...mapMutations({
    方法名称 : "文件夹名称/方法名称",
    "其他方法名称": "其他文件夹名称/方法名称"
  })

  上面这种方法都可以，看自己愿意使用哪一种,mapActions用法同mutations

  ...mapActions("文件夹名称",["方法名称" , "方法名称"])
  ...mapActions("其他文件夹名称",["方法名称" , "方法名称")

  ...mapActions({
    方法名称 : "文件夹名称/方法名称",
    "其他方法名称": "其他文件夹名称/方法名称"
  })
}

*/
